<template>
  <g>
    <polygon :points="points"></polygon>
    <circle cx="100" cy="100" r="80"></circle>
    <axis-label v-for="(stat,index) in stats" :stat="stat"
    :index="index"
    :key="stat.label+index"
    :total="stats.length"></axis-label>
  </g>
</template>
<script>
function valueToPoint(value, index, total) {
  var x = 0
  var y = -value * 0.8
  var angle = Math.PI * 2 / total * index
  var cos = Math.cos(angle)
  var sin = Math.sin(angle)
  var tx = x * cos - y * sin + 100
  var ty = x * sin + y * cos + 100
  return {
    x: tx,
    y: ty
  }
}
export default {
  name: 'SvgPolygraph',
  props: ['stats'],
  computed: {
    points() {
      var total = this.stats.length
      return this.stats.map((stat, i) => {
        var point = valueToPoint(stat.value, i, total)
        return [point.x, point.y]
      })
    }
  },
  components: {
    'axis-label': {
      props: {
        stat: Object,
        index: Number,
        total: Number
      },
      template: `
        <text :x="point.x" :y="point.y">{{stat.label}}</text>
        `,
      computed: {
        point() {
          return valueToPoint(+this.stat.value + 10, this.index, this.total)
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
polygon {
    fill: #42b983;
    opacity: .75;
}
circle {
    fill: transparent;
    stroke: #999;
}
text {
    font-family: Helvetica Neue, Arial, sans-serif;
    font-size: 10px;
    fill: #666;
}

</style>

